<template>
  <div class="machine_item">
    <div class="machine_name">
      <div class="_name">{{ machine_item.machineName }}</div>
      <div class="icon XingX_1" v-if="props.userType === 'customerService'"></div>
      <div class="icon dian"></div>
    </div>
    <div class="machine_id">
      设备编号:
      <div class="_id">{{ machine_item.machineId }}</div>
    </div>
    <div class="machine_status_inventory">
      <div class="machine_status">
        营业状态:
        <text class="_status">{{
          machine_item.operationStatus === 1
            ? '营业中'
            : machine_item.operationStatus === 2
              ? '休息中'
              : machine_item.operationStatus === 3
                ? '故障中'
                : ''
        }}</text>
      </div>
      <div class="machine_inventory" v-if="userInfoStore.userInfo.userType !== 'investor'">
        库存:<text class="_inventory">{{ machine_item.inventory || 0 }}/份</text>
      </div>
    </div>
    <div class="machine_locations">
      <div class="_title">地点:</div>
      <div class="_locations">{{ machine_item.positionAddr }}</div>
    </div>
    <ul class="_skipMap" @click.stop="userInfoStore.userInfo ? emit('open', machine_item) : null">
      <li class="icon skipMap"></li>
      <li class="_text">到这去</li>
      <li class="ju_li">{{ Math.floor(machine_item.distance) }}m</li>
    </ul>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { useUserInfoStore } from '@/stores'

const props = defineProps({
  machine_item: {
    type: Object,
    default: () => ({}),
  },
})

const userInfoStore = useUserInfoStore()

/**触发父组件的弹出层，并且把设备信息传过去 */
const emit = defineEmits(['open'])
</script>

<style lang="scss" scoped>
.machine_item {
  position: relative;
  margin-bottom: 11px;
  padding: 9px 17px 12px 13px;
  width: 347px;
  border-radius: 5px;
  background-color: #fff;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.09);
  .machine_name {
    position: relative;
    display: flex;
    font-size: var(--fs14);
    ._name {
      margin-right: 7px;
      color: var(--c3);
    }
    .XingX_1 {
      color: #ffaa2c;
    }
    .dian {
      position: absolute;
      left: -12px;
      top: 0;
      color: #5aceab;
    }
  }
  .machine_id,
  .machine_status_inventory,
  .machine_locations {
    margin-top: 7px;
    display: flex;
    color: var(--c6);
    font-size: var(--fs12);
  }
  .machine_locations {
    width: 273px;
    ._title {
      min-width: 30px;
    }
  }
  .machine_status {
    margin-right: 18px;
  }
  ._status,
  ._inventory,
  ._locations {
    color: var(--c9);
  }
  ._locations {
    width: 240px;
  }
  ._skipMap {
    position: absolute;
    right: 17px;
    bottom: 22px;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--subjectFc);
    font-size: var(--fs8);
    .skipMap {
      font-size: 20px;
    }
    .ju_li,
    ._text {
      font-size: var(--fs8);
      margin-bottom: 2px;
    }
  }
}
.machine_item:hover {
  border: 1px solid #5ecdad;
}
</style>
